<template>
  <div class="user-container">
    <div>
      <van-row class="userinfo">
        <van-col span="6">
          <img :src="avatarUrl" alt="" />
        </van-col>
        <van-col span="15">
          <span class="name" @click="showPopup">{{
            nickname ? nickname : "用户登录"
          }}</span>
        </van-col>
        <van-col span="3">
          <van-icon name="arrow" size="20px" color="#fff" />
        </van-col>
      </van-row>
    </div>
    <div class="cell-groud">
      <van-cell title="我的订单" is-link icon="orders-o" @click="clickFn" />
      <van-cell title="优惠券" is-link icon="bill-o" @click="clickFn" />
      <van-cell title="礼品卡" is-link icon="gift-card-o" @click="clickFn" />
      <van-cell title="会员福利" is-link icon="vip-card-o" @click="clickFn" />
      <van-cell title="我的位置" is-link icon="location-o" @click="clickFn" />
      <van-cell title="地址管理" is-link icon="aim" @click="clickFn" />
      <van-cell title="账号安全" is-link icon="shield-o" @click="clickFn" />
      <van-cell title="联系客服" is-link icon="service-o" @click="clickFn" />
      <van-cell title="帮助中心" is-link icon="warn-o" @click="clickFn" />
      <van-cell title="意见反馈" is-link icon="envelop-o" @click="clickFn" />
    </div>
    <van-popup v-model="show">
      <div class="login-modal">
        <van-form @submit="onSubmit">
          <van-field
            v-model="username"
            name="用户名"
            label="用户名"
            placeholder="用户名"
            :rules="[{ required: true, message: '请填写用户名' }]"
          />
          <van-field
            v-model="password"
            type="password"
            name="密码"
            label="密码"
            placeholder="密码"
            :rules="[{ required: true, message: '请填写密码' }]"
          />
          <div style="margin: 16px" round="true" close-on-popstate="true">
            <van-button round block type="info" native-type="submit"
              >提交</van-button
            >
          </div>
        </van-form>
      </div>
    </van-popup>
    <compTabbar></compTabbar>
  </div>
</template>

<script>
import { userLogin } from "@/request/api.js";
import compTabbar from "@/components/compTabbar.vue";
export default {
  components: {
    compTabbar,
  },
  data() {
    return {
      show: false,
      username: "",
      password: "",
      nickname: "",
      userInfo: null,
      token: "",
      avatarUrl: require("../assets/avatar.png"),
    };
  },
  methods: {
    clickFn() {
      this.$toast("该功能暂未开放！");
    },
    showPopup() {
      if (this.token) {
        this.show = false;
      } else {
        this.show = true;
      }
    },
    onSubmit(values) {
      console.log("submit", values);
      userLogin({
        username: values["用户名"],
        pwd: values["密码"],
      }).then((res) => {
        if (res.errno == 0) {
          console.log(res.data);
          let { token, userInfo } = res.data;
          localStorage.setItem("token", token);
          localStorage.setItem("userInfo", JSON.stringify(userInfo));
          this.$toast("登录成功！");
          setTimeout(() => {
            this.show = false;
          }, 500);
          let { nickname, avatar } = userInfo;
          this.nickname = nickname;
          this.avatarUrl = avatar;
        }
      });
    },
  },
  created() {
    let token = localStorage.getItem("token");
    let userInfo = JSON.parse(localStorage.getItem("userInfo"));
    this.token = token;
    if (userInfo) {
      let { nickname, avatar } = userInfo;
      this.nickname = nickname;
      this.avatarUrl = avatar;
    }
  },
};
</script>

<style lang="less" scoped>
.van-row.userinfo {
  padding: 20px 10px;
  background-color: #2c3e50;
}
.van-row.userinfo .van-col {
  line-height: 100px;
  font-size: 20px;
  img {
    width: 100%;
    border-radius: 50%;
  }
  span.name {
    margin-left: 10px;
    color: #fff;
  }
  &:last-child {
    text-align: right;
  }
}
.cell-groud {
  margin-top: 14px;
}
.login-modal {
  width: 80vw;
  height: 30vh;
}
.van-form {
  padding: 10px;
  box-sizing: border-box;
}
</style>